<template>
	<div class="container-page">
		<div class="container-bdody">
			<div class="customer-setting-content flex_between">
				<div class="c-box display-settings">
					<div class="setting-item">
						<div class="setting-label">预约设置</div>
					</div>
					<div class="display-item" v-for="(item, index) in sets_custom" :key="index">
						<span class="display-label font_size16">{{ item.name }}</span>
						<template v-if="item.type == 'num_step' || item.type == 'num_min'">
							<el-input-number v-model="objectForm[item.type]" controls-position="right" :min="1"
								:max="9999" size="small"></el-input-number>
						</template>
						<template v-else>
							<el-switch v-model="objectForm[item.type]" :active-value="'1'"
								:inactive-value="'2'"></el-switch>
						</template>
					</div>
				</div>
				<div class="c-box">
					<div class="setting-item">
						<div class="setting-label">时间间隔设置</div>
					</div>
					<div class="sort-options ">
						<div class="sort-item" v-for="(option, index) in tlong_ls" :key="index"
							:class="{ active: option.tlong == objectForm.tlong }" @click="selectSortOption(option)">
							<span class="font_size16">{{ option.txt }}</span>
							<span v-if="option.tlong == objectForm.tlong" class="check-icon">✓</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="container-footer flex_between">
			<div class="summary-info"></div>
			<div class="action-buttons">
				<el-button type="primary" @click="submitHandle" size="large" class="btn-confirm"> 保 存 </el-button>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, getCurrentInstance } from '@vue/composition-api'
import config from "@/js/conf/Config.js"
import API from "@/js/conf/api.js"
const { proxy } = getCurrentInstance()

const objectForm = ref({
	tlong: '30',
	iscost_add: '1', // 下单时设置服务费
	isoutday_add: '1', // 下单时设置有效期
	isprice_pre: '1', // 优先上次价1是2否 默认1
	num_step: 0, // 下单数量加减步长，不支持多规格多条码
	num_min: 0, // 商品起订量，对于每个sku
	isscan_num_step: '1', // 扫码时下单数量加减步长，1是2否 默认1
	isscan_act: '1', // 开单时扫码时动作，1直接开单；2去加购，默认1
	is2amount: '1', // 订单金额标题，1应收金额2订订单金额默认1
	is_seller: '1', // 显示经手人，1是2否 默认1
	is_txt: '1', // 显示单据备注，1是2否 默认1
})

const tlong_ls = ref([])
const sets_custom = ref([
	{
		type: 'iscost_add',
		name: '下单时设置服务费',
	},
	{
		type: 'isoutday_add',
		name: '下单时设置有效期',
	},
	{
		type: 'isprice_pre',
		name: '优先报上次价',
	},
	{
		type: 'num_step',
		name: '每次下单数量',
	},
	{
		type: 'num_min',
		name: '项目起订数量',
	},
	{
		type: 'isscan_num_step',
		name: '下单数量累加',
	},
	{
		type: 'isscan_act',
		name: '扫码进开单页',
	},

	{
		type: 'is2amount',
		name: '默认付款为实付',
	},
	{
		type: 'is_seller',
		name: '显示经手人',
	},
	{
		type: 'is_txt',
		name: '显示单据备注',
	},
])

const selectSortOption = (option) => {
	objectForm.value.tlong = option.tlong
}

// 提交保存
const submitHandle = async () => {
	try {
		const params = {
			...objectForm.value,
		}
		let res = await proxy.$api({ url: config.compset_yy_save, data: params })
		if (res.status == 1) {
			proxy.$message.success('保存成功')
			loadSettings()
		} else {
			proxy.$message.error(res?.msg || '保存失败')
		}
	} catch (error) {
		proxy.$message.error('保存失败')
	}
}

// 加载设置数据
const loadSettings = async () => {
	try {
		let res = await proxy.$api({ url: config.compset_yy_info, data: {} })
		let result = res.data
		if (res.status == 1) {
			tlong_ls.value = result?.tlong_ls
			objectForm.value = result
		}
	} catch (error) {
		console.error('加载设置失败', error)
	}
}

onMounted(async () => {
	// let res = await API.get_compset_base_info()
	// if (res.status == 1) {

	// }
	await loadSettings()
})
</script>

<style lang="scss" scoped>
.container-page {
	width: 100%;
	height: 100%;
	max-height: 100vh;
	/* 限制最大高度为视窗高度 */
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	overflow: hidden;

	/* 防止整体容器溢出 */
	.container-bdody {
		box-sizing: border-box;
		flex: 1;
		height: 0;
		/* 关键修复：设置高度为0，让flex-grow生效 */
		min-height: 0;
		/* 确保flex项可以收缩 */
		padding: 20px 40px 0 40px;
		overflow-y: auto;
	}

	.container-footer {
		border-top: 1px solid #f1f1f1;
		margin-top: 10px;
		padding: 14px 10px 4px;

		.summary-info {
			display: flex;
			align-items: center;
			gap: 16px;
		}

		.action-buttons {
			display: flex;
			gap: 12px;

			.btn-cancel {
				border-color: #cbd5e1;
				color: #64748b;
			}

			.btn-confirm {
				background-color: #3b82f6;
				border-color: #3b82f6;
			}
		}
	}
}

.c-box {
	width: 100%;
}

.customer-setting-content {
	gap: 20px;
	align-items: flex-start;
}

.setting-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid #eee;
}

.setting-label {
	font-size: 16px;
	color: #333;
	font-weight: bold;
}

.setting-value {
	flex: 1;
	text-align: right;
}

.sort-option {
	display: inline-flex;
	align-items: center;
	cursor: pointer;
	color: #666;
}

.arrow {
	margin-left: 5px;
	font-size: 12px;
}

/* 排序选项区域 */
.sort-options {
	background-color: #f8f9fa;
	border-radius: 6px;
	margin-top: 10px;
	margin-bottom: 30px;
}

.sort-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 16px;
	cursor: pointer;
	transition: background-color 0.2s;
	border-bottom: 1px solid #eee;
}

.sort-item:hover {
	background-color: #e9ecef;
}

.sort-item.active {
	color: #3b82f6;
	font-weight: 500;
}

.check-icon {
	font-size: 16px;
}


.display-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px 16px;
	border-bottom: 1px solid #eee;
}

.display-label {
	font-size: 14px;
	color: #333;
}
</style>